<template>
  <div>
    <HeaderFilter @add="visible = true" :delDisabled="!delIds.length" @reload="getData" @search="search" @del="del()"
      @reset="reset">
      <a-form-item label="检查结果">
        <a-select style="width: 120px" v-model:value="filterParams.inspectResult">
          <a-select-option value="">全部</a-select-option>
          <a-select-option :value="item.value" v-for="item in inspectResults" :key="item.value">{{ item.label
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="检查时间">
        <a-range-picker v-model:value="filterParams.inspectTime" />
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="filterParams.keyWord" placeholder="请输入" />
      </a-form-item>
    </HeaderFilter>

    <QfTable @edit="edit" v-model:ids="delIds" v-model:page="paginationParams.page" :columns="columns"
      :dataSource="dataSource" :loading="loading" :pagination="paginationParams" :total="total" @del="del">

      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'inspectResult'">
          {{ inspectResults.find(item => item.value === record.inspectResult)?.label }}
        </template>
        <template v-if="column.dataIndex === 'company'">
          {{ record.company?.companyName }}
        </template>
      </template>
    </QfTable>

    <a-modal v-model:open="visible" title="新增" @ok="handleOk">
      <a-form>
        <a-form-item label="单位名称">
          <a-select @search="search" show-search style="width: 320px" v-model:value="formState.companyId">
            <a-select-option v-for="item in companyDataInfo.dataSource.value" :value="item.id" :key="item.id">{{
              item.companyName
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="检查结果">
          <a-radio-group v-model:value="formState.inspectResult">
            <a-radio v-for="item in inspectResults" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="检查时间">
          <a-date-picker v-model:value="formState.inspectTime" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import HeaderFilter from '../components/header-filter.vue';
import { useFetchList } from './../hooks/fetchList'
import { useDelList } from './../hooks/delList'
import { useApi } from './../api/useApi'
import QfTable from './../components/qf-table.vue'
import { useInsert } from './../hooks/insert'
import API from './../api'
import { cloneDeep } from 'lodash'
import dayjs from 'dayjs'

const inspectApi = useApi('/api/admin/inspectionSupervision/inspec')

const companyDataInfo = useFetchList({
  api: API.getCompanys
})

const { dataSource,
  paginationParams,
  filterParams,
  getData,
  total, loading } = useFetchList({
    api: inspectApi.getData
  })

const { del, delIds } = useDelList({
  api: inspectApi.delData,
  paginationParams
})

const { formState,
  visible,
  handleOk,
  edit } = useInsert({
    convertFormState: (data) => {

      const newData = cloneDeep(data)

      if (newData.companyId) {
        newData.company = companyDataInfo.dataSource.value.find(item => item.id === newData.companyId)
      }

      if (newData.inspectTime) {
        newData.inspectTime = dayjs(newData.inspectTime).format('YYYY-MM-DD')
      }

      return newData
    },

    convertUpdateData: (data) => {

      if (data.company) {
        data.companyId = data.company.id
      }

      if (data.inspectTime) {
        data.inspectTime = dayjs(data.inspectTime, 'YYYY-MM-DD')
      }

      return data
    },

    updateData: inspectApi.updateData,
    addData: inspectApi.addData,
    getDataInfo: inspectApi.getDataInfo,
    paginationParams
  })


const inspectResults = [
  {
    label: "合格",
    value: "A",
  },
  {
    label: "不合格",
    value: "B",
  },
  {
    label: "已整改",
    value: "C",
  },
];

const columns = [
  {
    title: "检查时间",
    dataIndex: "inspectTime"
  },
  {
    title: "检查结果",
    dataIndex: "inspectResult"
  },
  {
    title: "单位名称",
    dataIndex: "company"
  },
]

/**
 * 搜索
 */
const search = (value) => {
  companyDataInfo.filterParams.value.keyWord = value
  companyDataInfo.getData()
}

const reset = () => {
  filterParams.value = {}
  paginationParams.value = {
    ...paginationParams.value,
    page: 1
  }
}


</script>